import useModelStore from "@/stores/modules/useModelStore.ts";
import {watch} from "vue";

const {setVisible, setContent, setTitle, setBtn, getBtn, setStatus, setLoading} = useModelStore()
type ShowProps = {
    content: string,
    title?: string,
    status?: 'success' | 'warning' | 'danger' | 'info'
}

const useModal = () => {
    const show = (data: ShowProps) =>{
        setVisible(true)
        setContent(data.content)
        setTitle(data?.title || '提示')
        setStatus(data?.status || 'warning')
        setBtn('')
        setLoading(false)


        return new Promise((resolve, reject) => {
            // 需要每次调用show方法时监听按钮
            const stopWatch = watch(() => getBtn(), (val) => {
                if (val === 'ok') {
                    setLoading(true)
                    resolve(true)
                    stopWatch()
                }
                if (val === 'cancel') {

                    setVisible(false)
                    reject(false)
                    stopWatch()
                }
            }, { immediate: true })
        })
    }


    const loading = () => {
        setLoading(false)
    }

    const hide = () => {
        setVisible(false)
        loading()
    }

    // return {
    //     show,
    //     hide,
    //     loading
    // }
    return {
        ModalShow: show,
        ModalHide: hide,
        ModalLoading: loading,
    }
}

export default useModal